<template>
  <div>
    <mt-navbar v-model="selected">
      <mt-tab-item v-for="(nav, index) in barList" :id="nav.num" :key="index" class="navbar" @click.native="routerTo(nav.pathName)">
        <mt-badge slot="icon" type="error" size="small" class="custom-badge" v-if="nav.badgeShow"></mt-badge>
        <div slot="icon" class="icons" :class="nav.iconClass" v-if="nav.iconClass"></div>
        {{nav.title}}
      </mt-tab-item>
    </mt-navbar>
  </div>
</template>
<script>

export default {
  name: 'NavBar',
  props: ['barList', 'showContainer'],
  data () {
    return {
      selected: '1'
    }
  },
  methods: {
    routerTo (pathName) {
      this.$router.push({'name': pathName})
    }
  }
}
</script>
<style lang="less">
.navbar {
  .mint-tab-item-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    position: relative;
    .icons {
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .nav-report {
      background-image: url('/src/assets/nav/nav-report.png');
    }
    .nav-broke-news {
      background-image: url('/src/assets/nav/nav-broke-news.png');
    }
    .nav-supply {
      background-image: url('/src/assets/nav/nav-supply.png');
    }
    .mint-badge {
      &.custom-badge {
        width: 12px;
        height: 12px;
        border-radius: 100%;
        padding: 0;
        position: absolute;
        right: 0;
      }
    }
  }
}
</style>